<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/layui/layui.all.js"></script>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <style>
        ul,li{ padding:0;margin:0;list-style:none}
    </style>
</head>
<body style="background:#F5F5F5;">
    <ul class="layui-nav" lay-filter="">
        <li class="layui-nav-item"><a href="">vovoqi聊天室</a></li>
        <li class="layui-nav-item layui-layout-right"><a href="">{$user->nickname}</a></li>
    </ul>
    <div class="layui-container">
        <div id="vo_window">
            <div class="layui-col-md7">
                <div class="layui-card" style="border: 1px solid red">
                    <div class="layui-card-body" style="height: 300px;overflow: auto" id="vo_div_scroll">
                        <ul id="vo_msg" style="overflow: auto">

                        </ul>
                    </div>
                </div>
            </div>
            <div class="layui-col-md1">
                &nbsp;
            </div>

            <div class="layui-col-md4">
                <div class="layui-card">
                    <div class="layui-card-header">输入框</div>
                    <div class="layui-card-body">
                        <textarea name="input" id="input" cols="30" rows="10"></textarea>
                        <div class=""><input type="button" id="send" name="发送" title="发送" value="发送"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-card" id="friends">
            <div class="layui-card-body">
                <ul id="friendList">
                    <li id="null"><a class="layui-btn friend layui-btn-primary layui-btn-fluid">全部</a></li>
                </ul>
            </div>
        </div>

    </div>
<script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use(['element','layer'], function(){
        var element = layui.element;

        layer.open({
            title:'聊天窗口',
            area:"900px",
            type:1,
            content:$('#vo_window'),
            shade:false
        });

        layer.open({
            title:'好友列表',
            type:1,
            offset:'r',
            content:$('#friends'),
            shade:false
        })
    });
</script>
</body>
<script type="application/javascript">
    function initWS(){
        var webSock = new WebSocket('ws://swoole.vovoqi.com:39999?userid={$user->userId}');
        webSock.onopen = function () {
            webSock.send(JSON.stringify({init:true}));
        };
        webSock.sendMsg = function (data,toWho) {
            webSock.send(JSON.stringify({data:data,toWho:toWho}));
        };
        return webSock;
    }


    $(function () {
        var toWho = null;
        var myId = null;
        var webSock = initWS();
        webSock.onmessage = function (evt) {
            var data = null;
            if (typeof evt.data == 'string'){
                data = JSON.parse(evt.data);
            }else{
                data = evt.data;
            }
            if (data.type == 0){
                myId = data.from;
                for (f in data.onlines){
                    if ($('#friendList').find('#' + data.onlines[f].id).length == 0) {
                        $('#friendList').append('<li id="' + data.onlines[f].id + '"><a class="layui-btn friend layui-btn-primary layui-btn-fluid">'+ (data.onlines[f].sex == 0?"<span class='layui-icon layui-icon-user'></span>":(data.onlines[f].sex == 1? "<span class='layui-icon layui-icon-male'></span>":"<span class='layui-icon layui-icon-female'></span>")) + data.onlines[f].nickname + '</a></li>');
                    }
                }
            }else if(data.type == 1) {
                if ($('#friendList').find('#' + data.from).length == 0) {
                    $('#friendList').append('<li id="' + data.from + '"><a class="layui-btn friend layui-btn-primary layui-btn-fluid">'+ (data.sex == 0?"<span class='layui-icon layui-icon-user'></span>":(data.sex == 1? "<span class='layui-icon layui-icon-male'></span>":"<span class='layui-icon layui-icon-female'></span>")) + data.nickname + '</a></li>');
                }
            }else if(data.type == 2){
                $('#'+data.from).remove();
            }else if(data.type == 3){
                var vm = $("#vo_div_scroll");
                var iScrollTop = vm.scrollTop();
                $("#vo_msg").append("<li>"+data.nickname+"："+data.data+"</li>");
                iScrollTop += 100;
                vm.scrollTop(iScrollTop);
            }
            $('.friend').on('click',function () {
                toWho = $(this).parent().attr('id');
                if (toWho == 'null'){
                    toWho = null;
                }
                return false;
            });
        };

        $('#send').on('click',function () {
            var msg = $('#input');
            webSock.sendMsg(msg.val(),toWho);
            msg.val('');
            $("#vo_msg").append("<li class='layui-layout-right'>"+data.nickname+"："+data.data+"</li>");
        });
    });
</script>
</html>